<template>
  <div class="btn-group" :class="{open:isToggle}">
    <button type="button" class="btn {{btnClass}}" @click="toggle">
      {{actionText}}
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <slot>
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
      </slot>
    </ul>
  </div>
</template>

<script>
export default {
  props:{
    isToggle:{
      type: Boolean,
      default: false
    },
    actionText:{
      type: String,
      default: "Action"
    },
    btnClass:{
      type: String,
      default: "btn-default"

    }
  },
  methods:{
    toggle:function(){
      this.isToggle=!this.isToggle
    }
  }
}
</script>
